<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入
* iclient-plot-leaflet (https://iclient.supermap.io/web/libs/plotting/leaflet/12.0.0.0/iclient-plot-leaflet.min.js)
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_symbolGroup"></title>
    <link rel="stylesheet" href="../css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/iconfont/plotting.css">
    <style type="text/css">
        body {
            margin: 0;
            overflow: hidden;
            background: #fff;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
        }

        #map {
            position: absolute;
            left: 250px;
            right: 0px;
            height: 100%;
        }

        #plottingMenu {
            position: absolute;
            top: 20%;
            z-index: 888;
            left: 260px;
            color: #000000;
            background-color: #fff;
        }

        #plottingPanel {
            float: left;
            background: #ffffff;
            width: 250px;
            height: 100%;
            border: 1px solid #3473b7;
        }
    </style>
</head>

<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;"
    oncontextmenu="return false">
    <div id="toolbar0" class="panel panel-primary" style=" position: absolute;top: 15px;right: 10px;text-align: center;z-index: 9999;border-radius: 4px;width: 252px;
        border: 1px solid #337ab7;">
        <div class='panel-heading' id="panelheading">
            <h5 class='panel-title text-center' data-i18n="resources.title_plotMap"
                style=" font-size: 16px;color: #ffffff;"></h5>
        </div>
        <div style="margin: 10px;">
            <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_savePlot"
                onclick="savePlotMap()" />
            <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_openPlot"
                onclick="openPlotMap()" />
            <input type="file" accept=".json" id="plottingOpenMapFile" style="display: none">
        </div>
    </div>
    </div>
    <div id="toolbar0" class="panel panel-primary" style=" position: absolute;top: 120px;right: 10px;text-align: center;z-index: 9999;border-radius: 4px;width: 252px;
        border: 1px solid #337ab7;">
        <div class='panel-heading' id="panelheading">
            <h5 class='panel-title text-center' data-i18n="resources.title_drawFeatures"
                style=" font-size: 16px;color: #ffffff;"></h5>
        </div>
        <div style="margin: 10px;">
            <!-- <div class='input-group' style="width: 220px;margin-bottom: 15px;">
                <span class='input-group-addon' data-i18n="resources.text_checkType"></span>
                <select type='text' class='form-control' id='symbol' onchange="symbolChanged(event)">
                    <option id="10001" data-i18n="resources.option_symbol" value="0"></option>
                    <option id="10002" data-i18n="resources.option_picture" value="1"></option>
                    <option id="10003" data-i18n="resources.option_model" value="2"></option>
                </select>
            </div> -->
            <div class='input-group' style="width: 220px;margin-bottom: 15px;">
                <span class='input-group-addon' data-i18n="resources.text_number"></span>
                <input type='text' class='form-control' id='count' value='15' style="width: 110px;" />
                <input type="button" class="btn btn-default" data-i18n="[value]resources.text_drawGraphics"
                    onclick="drawGraphics()" />
            </div>
        </div>
    </div>
    </div>
    <div id="toolbar" class="panel panel-primary"
        style="position: absolute;top: 230px;right: 10px;text-align: center;z-index: 800;border-radius: 4px;">
        <div class='panel-heading' id="panelheading">
            <h5 class='panel-title text-center' data-i18n="resources.title_symbolGroup"
                style="font-size: 16px;font-weight: normal;color: #fff;"></h5>
        </div>
        <div class='panel-body content'>
            <div class='panel' id="propertypanel">
                <div class='input-group' style="width: 220px;margin-bottom: 15px;margin: 15px;">
                    <span class='input-group-addon' data-i18n="resources.text_rangeColor"></span>
                    <input type="text" id="rangeColor" value="" class='form-control' />
                    <span class='input-group-addon'><img src='../img/colorpicker.png' id="cp1"
                            style="cursor:pointer; z-index: 9999;" /></span>
                </div>
                <div class='input-group' style="width: 220px;margin-bottom: 15px;margin: 15px;">
                    <span class='input-group-addon' data-i18n="resources.text_infoBackColor"></span>
                    <input type="text" id="fontBackgroundColor" value="" class='form-control' />
                    <span class='input-group-addon'><img src='../img/colorpicker.png' id="cp2"
                            style="cursor:pointer; z-index: 9999;" /></span>
                </div>
                <div class='input-group' style="width: 220px;margin-bottom: 15px;margin: 15px;">
                    <span class='input-group-addon' data-i18n="resources.text_infoBorderColor"></span>
                    <input type="text" id="fontBackgroundBorderColor" value="" class='form-control' />
                    <span class='input-group-addon'><img src='../img/colorpicker.png' id="cp3"
                            style="cursor:pointer; z-index: 9999;" /></span>
                </div>
                <div class='input-group' style="width: 220px;margin-bottom: 15px;margin: 15px;">
                    <span class='input-group-addon' data-i18n="resources.btn_setCulsterRangeVisible"></span>
                    <select class='form-control' id='culsterRangeVisible' onchange="setCulsterRangeVisible()">
                        <option value='0'>false</option>
                        <option value='1'>true</option>
                    </select>
                </div>
                <div class='input-group' style="width: 220px;margin-bottom: 15px;margin: 15px;">
                    <span class='input-group-addon' data-i18n="resources.btn_rangeOnlyInClusterVisible"></span>
                    <select class='form-control' id='onlyInCulsterRangeVisible' onchange="setCulsterRangeVisible()">
                        <option value='0'>false</option>
                        <option value='1'>true</option>
                    </select>
                </div>
                <div class='input-group' style="width: 220px;margin-bottom: 15px;margin: 15px;">
                    <span class='input-group-addon' data-i18n="resources.btn_setCulsterInfoVisible"></span>
                    <select class='form-control' id='culsterInfoVisible' onchange="setCulsterInfoVisible()">
                        <option value='0'>false</option>
                        <option value='1'>true</option>
                    </select>
                </div>
                <div class='input-group' style="width: 220px;margin-bottom: 15px;margin: 15px;">
                    <span class='input-group-addon' data-i18n="resources.btn_infoOnlyInCluserVisible"></span>
                    <select class='form-control' id='onlyInCulsterInfoVisible' onchange="setCulsterInfoVisible()">
                        <option value='0'>false</option>
                        <option value='1'>true</option>
                    </select>
                </div>
            </div>
            <div style="margin: 10px;">
                <input type="button" id="createOrUnSymbolGroup" class="btn btn-default" value=""
                    onclick="createOrUnSymbolGroup()" />
                <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_deleteSymbolGroup"
                    onclick="deleteSymbol()" />
            </div>
        </div>
    </div>
    <div id="plottingPanel">
        <div class="easyui-panel"
            style="position:absolute;top:0px;bottom:0px;left:0px;right:0px;padding:5px; width: 100%;">
            <div class="easyui-tabs" style="width: 100%;height: 100%">
                <div id="plotPanel" data-i18n="[title]resources.text_drawPanel" style="overflow: hidden"></div>
                <div id="stylePanel" data-i18n="[title]resources.text_attributePanel"></div>
            </div>
        </div>
    </div>
    <div id="plottingMenu" class="plotting-menu">
        <li>
            <span class="icon iconfont icon-quanxuan" data-i18n="[title]resources.title_rectselect"
                onclick="multiSelectModel()"></span>
        </li>
    </div>
    <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
    <script type="text/javascript" include="bootstrap,widgets.alert,plottingPanel,bootstrap-css,responsive,colorpicker"
        src="../js/include-web.js"></script>
    <script type="text/javascript" include="iclient-leaflet-css,iclient-plot-leaflet"
        src="../../dist/leaflet/include-leaflet.js"></script>
    <script type="text/javascript" include="PlotPanel,StylePanel"
        src="../js/plottingPanel/PlottingPanel.Include.js"></script>
    <script type="text/javascript">
        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
        var url = host + "/iserver/services/map-china/rest/maps/China_4326";
        var serverUrl = host + "/iserver/services/plot-jingyong/rest/plot/";
        var map, symbolLibManager, plotting, currentSymbolType;

        map = L.map('map', {
            preferCanvas: true,
            crs: L.CRS.EPSG4326,
            center: [35, 104],
            maxZoom: 18,
            zoom: 3
        });
        L.supermap.tiledMapLayer(url).addTo(map);
        var plottingLayer = L.supermap.plotting.plottingLayer("plot", serverUrl);
        plottingLayer.addTo(map);
        var drawControl = L.supermap.plotting.drawControl(plottingLayer);
        drawControl.addTo(map);
        var editControl = L.supermap.plotting.editControl();
        editControl.addTo(map);
        plotting = L.supermap.plotting.getControl(map, serverUrl);
        var plotMapManager = plotting.getPlotMapManager();
        L.supermap.plotting.initPlotPanel("plotPanel", serverUrl, drawControl);
        L.supermap.plotting.initStylePanel("stylePanel", serverUrl, editControl);

        diabledPropertyPanel();

        editControl.on("featuresselected", featuresSelected);

        editControl.on("featuresunselected", featuresUnselected);

        featuresUnselected();
        document.getElementById("plottingOpenMapFile").addEventListener('input', (evt) => {
            var file = evt.target.files;
            var reader = new FileReader();
            reader.readAsText(file[0]);
            reader.onload = function (e) {
                plotMapManager.loadFrom(JSON.parse(reader.result));
                drawControl.setDrawingLayer(plotMapManager.getActivePlottingLayer());
                plottingLayer = plotMapManager.getActivePlottingLayer();
            }
        });
        // document.getElementById("symbol").value = "0";
        // currentSymbolType = resources.option_symbol;
        document.getElementById("createOrUnSymbolGroup").value = resources.btn_createSymbolGroup;

        function featuresSelected() {
            var features = editControl.getSelectedFeatures();
            if (features.length == 1 && features[0].symbolType == 999) {
                document.getElementById("rangeColor").disabled = false;
                document.getElementById("fontBackgroundColor").disabled = false;
                document.getElementById("fontBackgroundBorderColor").disabled = false;
                document.getElementById("cp1").disabled = false;
                document.getElementById("cp2").disabled = false;
                document.getElementById("cp3").disabled = false;
                $("#cp1").css("pointer-events", "");
                $("#cp2").css("pointer-events", "");
                $("#cp3").css("pointer-events", "");
                document.getElementById("culsterRangeVisible").disabled = false;
                document.getElementById("onlyInCulsterRangeVisible").disabled = false;
                document.getElementById("culsterInfoVisible").disabled = false;
                document.getElementById("onlyInCulsterInfoVisible").disabled = false;
            } else {
                diabledPropertyPanel();
            }
            for (var i = 0; i < features.length; i++) {
                if (features[i].symbolType != 999) {
                    document.getElementById("createOrUnSymbolGroup").value = resources.btn_createSymbolGroup
                    continue;
                }
                document.getElementById("rangeColor").value = features[i].style.rangeColor;
                document.getElementById("fontBackgroundColor").value = features[i].style.fontBackgroundColor;
                document.getElementById("fontBackgroundBorderColor").value = features[i].style.fontBackgroundBorderColor;
                document.getElementById("createOrUnSymbolGroup").value = resources.btn_unSymbolGroup;

                if (features[i].showClusterRange)
                    document.getElementById("culsterRangeVisible").value = 1;
                else
                    document.getElementById("culsterRangeVisible").value = 0;

                if (features[i].showClusterInfo)
                    document.getElementById("culsterInfoVisible").value = 1;
                else
                    document.getElementById("culsterInfoVisible").value = 0;

                if (features[i].rangeIsOnlyInCluster)
                    document.getElementById("onlyInCulsterRangeVisible").value = 1;
                else
                    document.getElementById("onlyInCulsterRangeVisible").value = 0;

                if (features[i].infoIsOnlyInCluster)
                    document.getElementById("onlyInCulsterInfoVisible").value = 1;
                else
                    document.getElementById("onlyInCulsterInfoVisible").value = 0;
            }
        }
        function featuresUnselected() {
            document.getElementById("rangeColor").value = "";
            document.getElementById("fontBackgroundColor").value = "";
            document.getElementById("fontBackgroundBorderColor").value = "";

            document.getElementById("culsterRangeVisible").value = 0;
            document.getElementById("onlyInCulsterRangeVisible").value = 0;

            document.getElementById("culsterInfoVisible").value = 0;
            document.getElementById("onlyInCulsterInfoVisible").value = 0;

            diabledPropertyPanel();

        }
        function diabledPropertyPanel() {
            document.getElementById("rangeColor").disabled = true;
            document.getElementById("fontBackgroundColor").disabled = true;
            document.getElementById("fontBackgroundBorderColor").disabled = true;
            document.getElementById("cp1").disabled = true;
            document.getElementById("cp2").disabled = true;
            document.getElementById("cp3").disabled = true;
            $("#cp1").css("pointer-events", "none");
            $("#cp2").css("pointer-events", "none");
            $("#cp3").css("pointer-events", "none");
            document.getElementById("culsterRangeVisible").disabled = true;
            document.getElementById("onlyInCulsterRangeVisible").disabled = true;
            document.getElementById("culsterInfoVisible").disabled = true;
            document.getElementById("onlyInCulsterInfoVisible").disabled = true;
        }
        // function symbolChanged(event) {
        //     switch (event.target.value) {
        //         case '0':
        //             currentSymbolType = resources.option_symbol;
        //             break;
        //         case '1':
        //             currentSymbolType = resources.option_picture;
        //             break;
        //         case '2':
        //             currentSymbolType = resources.option_model;
        //             break;

        //         default:
        //             break;
        //     }
        // }

        function createRoomNumber() {
            var libID = 421;
            var code = 2;
            var e = 15;
            var num = document.getElementById("count").value;
            // for (var i = 0; i < num; i++) {
            //     var latlngs = [new L.latLng(map.getCenter().lat + (2 * e * Math.random() - e), map.getCenter().lng + (2 * e * Math.random() - e))];
            //     plottingLayer.createSymbol(libID, code, latlngs);
            // }

            var features = [];
            var options = {};

            var params = new SuperMap.GetSymbolInfoParameters({
                libID: 421,
                code: 2
            });
            L.supermap.symbolInfoService(serverUrl).getSymbolInfo(params, function (serviceResult) {

                for (var i = 0; i < num; ++i) {

                    options.symbolData = SuperMap.Plot.PlottingUtil.cloneObject(serviceResult.result);
                    options.serverUrl = serverUrl;

                    // options.specialEffects = [new SuperMap.Plot.ScanRadar({})];
                    // options.specialEffects.push(new SuperMap.Plot.SectorDetectionRange({}));

                    // options.specialEffects = [new SuperMap.Plot.Boom({})];
                    // options.specialEffects = [new SuperMap.Plot.Destroy({})];
                    
                    var associatedUuid = '';
                    if(plottingLayer.features.length != 0){
                        associatedUuid = plottingLayer.features[0].uuid;
                    }
                    // options.specialEffects = [new SuperMap.Plot.CommunicationLink({receiverUuid: associatedUuid})];
                    // options.specialEffects = [new SuperMap.Plot.Aim({aimUuid: associatedUuid})];


                    var coordinates = [map.getCenter().lat + (2 * e * Math.random() - e), map.getCenter().lng + (2 * e * Math.random() - e)];
                    // var dotSymbol = L.supermap.plotting.PlottingObject.createSymbol(libID, code, L.latLng(coordinates[0], coordinates[1]), options, null, null);

                    plottingObject = L.supermap.plotting.PlottingObject.createSymbol(libID, code, L.latLng(coordinates[0], coordinates[1]), options, null, null);
                    features.push(plottingObject);
                }


                // if (typeof callback === "function") {
                //     callback({ feature: plottingObject });
                // }
                plottingLayer.addFeatures(features);
            }, this);

        }
        function createAirPlane() {
            var e = 15;
            var num = document.getElementById("count").value;
            var path = "../img/Plane/Plane_1.png";
            for (var i = 0; i < num; i++) {
                var latlngs = [];
                latlngs.push(new L.latLng(map.getCenter().lat + (2 * e * Math.random() - e), map.getCenter().lng + (2 * e * Math.random() - e)));
                // plottingLayer.createSymbol(libID, code, latlngs);
                plottingLayer.createSymbol(0, SuperMap.Plot.SymbolType.PICTURE, latlngs, null, { graphicWidth: 44, graphicHeight: 33 }, { path: path }, function (evt) { }, {});
            }
        }
        function createPicture() {
            var libID = 0;
            var code = 20;
            var e = 15;
            var num = document.getElementById("count").value;
            var options = {};
            options.path = "../img/Plane/Plane_1.png";
            for (var i = 0; i < num; i++) {
                var latlngs = [new L.latLng(map.getCenter().lat + (2 * e * Math.random() - e), map.getCenter().lng + (2 * e * Math.random() - e))];
                // plottingLayer.createSymbol(libID, code, latlngs, "", {}, options);          
                plottingLayer.createSymbol(libID, code, latlngs);
            }
        }
        function drawGraphics() {
            this.createRoomNumber();
            // if (currentSymbolType === resources.option_symbol) {
            //     this.createRoomNumber();
            // } else if (currentSymbolType === resources.option_model) {
            //     this.createAirPlane();
            // } else if (currentSymbolType === resources.option_picture) {
            //     this.createPicture();
            // }
        }
        function multiSelectModel() {
            editControl.multiSelect();
        }

        function setCulsterRangeVisible() {
            var features = editControl.getSelectedFeatures();
            if (features.length == 0) {
                alert("请选择要修改的聚合对象");
                return;
            }
            if (features[0].symbolType != 999) {
                return;
            }
            if (document.getElementById("culsterRangeVisible").selectedIndex === 0) {
                if (document.getElementById("onlyInCulsterRangeVisible").selectedIndex === 0) {
                    features[0].setRangeVisible(false, false);
                } else {
                    features[0].setRangeVisible(false, true);
                }

            } else {
                if (document.getElementById("onlyInCulsterRangeVisible").selectedIndex === 0) {
                    features[0].setRangeVisible(true, false);
                } else {
                    features[0].setRangeVisible(true, true);
                }
            }
        }

        function setCulsterInfoVisible() {
            var features = editControl.getSelectedFeatures();
            if (features.length == 0) {
                alert("请选择要修改的聚合对象");
                return;
            }
            if (features[0].symbolType != 999) {
                return;
            }
            if (document.getElementById("culsterInfoVisible").selectedIndex === 0) {
                if (document.getElementById("onlyInCulsterInfoVisible").selectedIndex === 0) {
                    features[0].setSymbolInfoVisible(false, false);
                } else {
                    features[0].setSymbolInfoVisible(false, true);
                }

            } else {
                if (document.getElementById("onlyInCulsterInfoVisible").selectedIndex === 0) {
                    features[0].setSymbolInfoVisible(true, false);
                } else {
                    features[0].setSymbolInfoVisible(true, true);
                }
            }
        }

        function createOrUnSymbolGroup() {
            if (document.getElementById("createOrUnSymbolGroup").value == resources.btn_createSymbolGroup) {
                var features = editControl.getSelectedFeatures();
                if (features.length == 0) {
                    alert("请选择要聚合显示的标号");
                    return;
                }
                plottingLayer.createSymbolGroup(features);
            } else {
                var features = editControl.getSelectedFeatures();
                if (features.length == 0) {
                    alert("请选择要解绑的聚合对象");
                    return;
                }
                var hasSumbolGroup = false;
                for (var i = 0; i < features.length; i++) {
                    if (features[i].symbolType == 999) {
                        hasSumbolGroup = true;
                    }
                }
                if (!hasSumbolGroup) {
                    alert("当前选中对象没有聚合对象！");
                    return;
                }
                for (var i = 0; i < features.length; i++) {
                    if (features[i].symbolType == 999) {
                        plottingLayer.unGroupSymbol(features[i]);
                    }
                }
                document.getElementById("createOrUnSymbolGroup").value == resources.btn_createSymbolGroup
            }

        }
        function deleteSymbol() {
            var features = editControl.getSelectedFeatures();
            if (features.length == 0) {
                alert("请选择要删除的聚合对象");
                return;
            }
            var hasSumbolGroup = false;
            for (var i = 0; i < features.length; i++) {
                if (features[i].symbolType == 999) {
                    hasSumbolGroup = true;
                }
            }
            if (!hasSumbolGroup) {
                alert("当前选中对象没有聚合对象！");
                return;
            }
            for (var i = 0; i < features.length; i++) {
                if (features[i].symbolType == 999) {
                    plottingLayer.removeFeatures(features[i]);
                }
            }

        }

        //保存态势图
        function savePlotMap() {
            // plotting.getSitDataManager().saveSmlFile("situationMap");
            let strJson = plotMapManager.saveTo();
            const blob = new Blob([strJson], {
                type: "application/json",
            });
            const objectURL = URL.createObjectURL(blob);
            const domElement = document.createElement("a");
            domElement.href = objectURL;
            domElement.download = resources.title_plotMap + getFileTime();
            domElement.click();
            URL.revokeObjectURL(objectURL);
        }
        function getFileTime() {
            const data = new Date();
            let year = data.getFullYear();
            let month = data.getMonth() + 1;
            let day = data.getDate();
            let hours = data.getHours();
            let minutes = data.getMinutes();
            month = month > 9 ? month : "0" + month;
            day = day > 9 ? day : "0" + day;
            hours = hours > 9 ? hours : "0" + hours;
            minutes = minutes > 9 ? minutes : "0" + minutes;
            return `${year}${month}${day}${hours}${minutes}`;
        }

        function openPlotMap() {
            // plotting.getSitDataManager().openSmlFileOnServer("situationMap", function (evt) {
            //     drawControl.setDrawingLayer(evt.sitDataLayers[0]);
            //     plottingLayer = evt.sitDataLayers[0];
            // });
            document.getElementById("plottingOpenMapFile").click();
        }

        $(document).ready(function () {
            $("#cp1").colorpicker({
                ishex: true,
                fillcolor: true,
                event: 'click',
                target: $("#rangeColor"),
                success: rangeColorChanges

            });
            $("#_creset").css("font-size", "12px");
            $("#_creset").css("padding-right", "20px");
            $("#colorpanel").css({ "z-index": "9999" });
        });
        function rangeColorChanges() {
            var color = document.getElementById("rangeColor").value;
            var features = editControl.getSelectedFeatures();
            if (features.length == 0) {
                alert("请选择要修改的聚合对象");
                return;
            }
            features[0].setStyle({ rangeColor: color });
        }

        $(document).ready(function () {
            $("#cp2").colorpicker({
                ishex: true,
                fillcolor: true,
                event: 'click',
                target: $("#fontBackgroundColor"),
                success: fontBackgroundColorChanges

            });
            $("#_creset").css("font-size", "12px");
            $("#_creset").css("padding-right", "20px");
            $("#colorpanel").css({ "z-index": "9999" });
        });
        function fontBackgroundColorChanges() {
            var color = document.getElementById("fontBackgroundColor").value;
            var features = editControl.getSelectedFeatures();
            if (features.length == 0) {
                alert("请选择要修改的聚合对象");
                return;
            }
            features[0].setStyle({ fontBackgroundColor: color });
        }

        $(document).ready(function () {
            $("#cp3").colorpicker({
                ishex: true,
                fillcolor: true,
                event: 'click',
                target: $("#fontBackgroundBorderColor"),
                success: fontBackgroundBorderColorChanges

            });
            $("#_creset").css("font-size", "12px");
            $("#_creset").css("padding-right", "20px");
            $("#colorpanel").css({ "z-index": "9999" });
        });
        function fontBackgroundBorderColorChanges() {
            var color = document.getElementById("fontBackgroundBorderColor").value;
            var features = editControl.getSelectedFeatures();
            if (features.length == 0) {
                alert("请选择要修改的聚合对象");
                return;
            }
            features[0].setStyle({ fontBackgroundBorderColor: color });
        }
        $(document).ready(function () {
            $('#panelheading').click(function () {
                $('#panelbodycontent').toggle();
            });
        });
    </script>
</body>

</html>